import Tag from "ant-design-vue/es/tag";
import Image from "ant-design-vue/es/image";
import { findOptionItems, getValue } from ".";
import type { ProFormColType } from "../../interface";
import type { JSX } from "vue/jsx-runtime";
import { defineAsyncComponent } from "vue";
// import ProTable from "../pro-table";

export const renderDescVal = (
  item,
  val,
  mode: "text" | "jsx"
): any | JSX.Element => {
  if (item.type === "table") {
    if (mode === "text") {
      return val?.map((v) => v[item.dataIndex] || "-") || "-";
    }

    const ProTable = defineAsyncComponent(() => import("../pro-table"));
    return (
      <ProTable
        mode="read"
        columns={item.fieldProps?.columns || []}
        tableProps={{ pagination: false }}
        request={() =>
          Promise.resolve({
            total: 0,
            current: 0,
            pageSize: 0,
            result: val,
          })
        }
      />
    );
  }
  if (item.type === "select") {
    if (["multiple", "tags"].includes(item.fieldProps?.mode || "")) {
      const opts = (val || []).map((v) =>
        findOptionItems(item.options || [], v)
      );
      return mode === "text" ? (
        opts.map((o) => o?.label).join(",") || "-"
      ) : (
        <>
          {opts.map((o) => (
            <Tag key={o.value}>{o.label}</Tag>
          ))}
        </>
      );
    }
    return findOptionItems(item.options || [], val)?.label || "-";
  } else if (item.type === "radio") {
    return findOptionItems(item.options || [], val)?.label || "-";
  } else if (item.type === "checkbox") {
    const opts = (val || []).map((v) => findOptionItems(item.options || [], v));
    return mode === "text" ? (
      opts.map((o) => o.label).join(",") || "-"
    ) : (
      <>
        {opts.map((o) => (
          <Tag key={o.value}>{o.label}</Tag>
        ))}
      </>
    );
  } else if (item.type === "timerange") {
    if (mode === "text") {
      return val.join(",") || "-";
    }
    return val?.join(" ~ ") || "-";
  } else if (item.type === "daterange") {
    if (mode === "text") {
      return val.join(",") || "-";
    }
    return val?.join(" ~ ") || "-";
  } else if (item.type === "image") {
    if (mode === "text") {
      return val || "-";
    }
    if (!Array.isArray(val)) {
      return val ? <Image key={val} src={val} height={50} /> : "-";
    }
    return (
      val?.map((v) => <Image key={v.url} src={v.url} height={50} />) || "-"
    );
  }
  return val || "-";
};

export const renderDescItem = (
  item: ProFormColType<any>,
  modal: Record<string, any>
) => {
  const val = getValue(modal, item.dataIndex);

  return (
    <div
      class="pro-desc-item flex py-[8px]"
      key={item.dataIndex + "" || item.title}
    >
      <div class="mr-[10px]">{item.title} : </div>
      <div class="flex-1">
        {item.textRender
          ? item.textRender({
              value: getValue(modal, item.dataIndex),
              text: renderDescVal(item, val, "text"),
              record: modal,
              index: null,
              col: item,
            })
          : renderDescVal(item, val, "jsx")}
      </div>
    </div>
  );
};
